<template>
	<div>
		
		<div class="tabbar-tip" v-if="totalmsgnum>0&&totalmsgnum<10" >
			<div class="centerreddot">{{totalmsgnum}}</div>
		</div>
		<div class="tabbar-tip" v-if="totalmsgnum>9&&totalmsgnum<100" v-bind:style="{'width':'0.5rem'}"><div class="centerreddot">{{totalmsgnum}}</div></div>
		<div class="tabbar-tip" v-else-if="totalmsgnum>99" v-bind:style="{'width':'0.6rem'}"><div class="centerreddot">{{largemsg}}</div></div>
		<div  @click="mine"> <img src="~img/me.png" class="my-tabbar"></div>
	</div>
</template>
<script>
	import { Tabbar, TabItem } from 'mint-ui';
	import api from 'src/api/index'
	export default{
		data () {
			return {
				msg : "tabbar",
				largemsg:"99+",
			}
		},
		mounted () {
		},
		methods : {
			mine () {
				this.$emit("mineclick");
				// this.$router.push({path:'/mine'}) ;
			}
		},
		props:['totalmsgnum']
	}
</script>
<style scoped>
	.centerreddot{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		color: #fff
	}
	.tabbar-tip{
		position:absolute;
		background-color:#fa4a39;
  	   	border-radius:0.5rem;
		width:0.35rem;
		/* height:0.35rem; */
		z-index:2;
		font-size: 0.25rem;
		margin-left:.62rem;
		/* padding:0.02rem 0.08rem; */
    	text-align: center;
	}
	.my-tabbar{
		width: 1rem;
		height: 1rem;
		color:#fff;
		text-align:center;
		position: fixed;
		left: 0.1rem;
		bottom: 0.2rem
	}
</style>
